<template>
  <div class="myOrder">
    <headerI title="我的订单">
      <div slot="grabble-icon" class="grabble-icon">
        <img
          src="../../assets/img/my-indent/my order_icon_search@2x.png"
          alt=""
        />
      </div>
    </headerI>
    <div class="nav">
      <ul>
        <li v-for="(item, idx) in nav" :key="idx" @click="choice(item)">
          <span :class="[{ current: current == item.id }]">{{
            item.text
          }}</span>
        </li>
      </ul>
    </div>
    <div class="center">
      <ul>
        <li v-for="(item, idx) in Cindent" :key="idx">
          <div class="indent-box">
            <div class="indent-header">
              <img :src="getImgUrl(item.img)" class="head" alt="" />
              <span class="user-name">{{ item.name }}</span>
              <img
                src="../../assets/img/my-indent/my order_icon_forward@2x.png"
                alt=""
                class="icon"
              />
              <span class="indent-deal">{{ item.deal }}</span>
            </div>
            <div class="shop">
              <img :src="getImgUrl(item.shopImg)" class="shop-img" alt="" />
              <div class="shop-box">
                <span class="shop-name">{{ item.shopName }}</span>
                <div class="shop-color">
                  <span>{{ item.shopColor }}</span>
                  <span>{{ item.shopCount }}</span>
                </div>
                <span class="shop-remark">七天包退换</span>
              </div>
            </div>
            <div class="shop-price">
              <span
                >·总价￥{{ item.shopPrice }} ·优惠￥{{
                  item.discounts
                }}
                ·实付款</span
              >
              <span class="allPrice">￥{{ allPrice(item) }}</span>
            </div>
            <div class="state">
              <span>删除订单</span>
              <span v-if="item.id == 5">评价</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import headerI from "../../components/indent-header.vue";

export default {
  name: "defaultHtml",
  components: {
    headerI,
  },
  data() {
    return {
      current: 1,
      nav: [
        {
          text: "全部",
          id: 1,
        },
        {
          text: "待付款",
          id: 2,
        },
        {
          text: "待发货",
          id: 3,
        },
        {
          text: "待收货",
          id: 4,
        },
        {
          text: "待评价",
          id: 5,
        },
      ],
      indent: [
        {
          img: "img/my-indent/my order_image_head portrait@2x.png",
          name: "莫源",
          deal: "交易成功",
          shopImg: "img/my-indent/my order_image@2x.png",
          shopName: "莫源 | 独自设计·鼻烟壶套装加送盒子",
          shopColor: "蓝绿色",
          shopCount: 1,
          shopPrice: 2300,
          discounts: 100,
          id: 5,
        },
        {
          img: "img/my-indent/portrait@2x.png",
          name: "陈思",
          deal: "交易关闭",
          shopImg: "img/my-indent/photo@2x.png",
          shopName: "陈思 | 景德镇原创国家非遗产手艺陶瓷杯子三件套",
          shopColor: "绿色",
          shopCount: 1,
          shopPrice: 558,
          discounts: 0,
          id: 2,
        },
      ],
      Cindent: [],
    };
  },
  methods: {
    choice(item) {
      this.current = item.id;
      if (this.current == 1) {
        this.Cindent = this.indent;
      } else {
        this.Cindent = [];
        this.indent.forEach((i) => {
          if (i.id == this.current) {
            this.Cindent.push(i);
          }
        });
      }
    },
    getImgUrl(icon) {
      return require("@/assets/" + icon);
    },
    allPrice(item) {
      return item.shopPrice - item.discounts;
    },
  },
  mounted() {
    this.Cindent = this.indent;
  },
};
</script>

<style lang="less" scoped>
.myOrder {
  background: #f5f5f5;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.grabble-icon {
  position: absolute;
  top: 0.08rem;
  right: 0.08rem;
  img {
    width: 0.24rem;
    height: 0.24rem;
    display: block;
  }
}
.nav {
  background: white;
  padding-bottom: 0.06rem;
  ul {
    padding-top: 0.16rem;
    display: flex;
    width: 3.43rem;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    li {
      span {
        font-size: 0.14rem;
        font-family: PingFang SC;
        color: #666666;
        display: block;
      }
      .current {
        font-size: 0.17rem;
        font-weight: bold;
        color: #1b7373;
        position: relative;
        &:after {
          position: absolute;
          content: "";
          display: block;
          width: 100%;
          height: 0.02rem;
          background: #1b7373;
          border-radius: 0.04rem;
          top: 0.26rem;
          left: 0;
        }
      }
    }
  }
}
.center {
  ul {
    li {
      width: 3.43rem;
      height: 2.47rem;
      background: white;
      margin: 0.12rem auto 0;
      .indent-box {
        margin: 0 0.12rem;
        padding: 0.12rem 0;
        .indent-header {
          display: flex;
          align-items: center;
          .head {
            width: 0.28rem;
            height: 0.28rem;
            display: block;
          }
          .user-name {
            display: block;
            font-size: 0.16rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: #333333;
            margin-left: 0.04rem;
          }
          .icon {
            width: 0.16rem;
            height: 0.16rem;
            display: block;
            margin-left: 0.04rem;
          }
          .indent-deal {
            display: block;
            font-size: 0.12rem;
            font-family: PingFang SC;
            color: #1b7373;
            margin-left: 1.87rem;
          }
        }
        .shop {
          margin-top: 0.12rem;
          display: flex;
          .shop-img {
            width: 0.9rem;
            height: 0.9rem;
            display: block;
          }
          .shop-box {
            margin-left: 0.12rem;
            .shop-name {
              display: block;
              font-size: 0.14rem;
              font-family: PingFang SC;
              font-weight: bold;
              color: #333333;
            }
            .shop-color {
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 0.12rem;
              span {
                display: block;
                font-size: 0.12rem;
                font-family: PingFang SC;
                color: #999999;
              }
            }
            .shop-remark {
              width: 0.6rem;
              height: 0.14rem;
              background: #f5f5f5;
              border-radius: 0.08rem;
              font-size: 0.1rem;
              font-family: PingFang SC;
              line-height: 0.18rem;
              color: #e42121;
              display: block;
              margin-top: 0.07rem;
            }
          }
        }
        .shop-price {
          margin-top: 0.24rem;
          display: flex;
          justify-content: flex-end;
          span {
            display: block;
            font-size: 0.12rem;
            color: #666666;
          }
          .allPrice {
            color: #e42121;
          }
        }
        .state {
          display: flex;
          justify-content: flex-end;
          margin-top: 0.25rem;
          span {
            margin-left: 0.16rem;
            width: 0.82rem;
            border: 0.01rem solid #999999;
            display: block;
            font-size: 0.14rem;
            font-family: PingFang SC;
            color: #333333;
            text-align: center;
            padding: 0.02rem 0 0.025rem;
          }
        }
      }
    }
  }
}

</style>